<template>
  <div class="realtimemonito-box">
    <!-- 下拉列表 -->
    <el-card class="content__left">
      <realtimemonito-menu :data="menus" v-model:menu-id="menuId" v-model:open-id="openId" @menu-click="commEvent.menuClick" />
    </el-card>
    <!-- 展示信息 -->
    <div class="content__right">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="header-search">
              <div class="header-search__item">
                <div class="item__label">能源类型：</div>
                <div class="item__value">
                  <el-select v-model="searchValue.energyType" filterable @change="commEvent.getDevice()">
                    <el-option v-for="item in energyTypeEnum" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="header-search">
              <div class="header-search__item">
                <div class="item__label">生产设备：</div>
                <div class="item__value">
                  <el-select v-model="searchValue.deviceId" filterable>
                    <el-option v-for="item in devices" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <el-row justify="end">
              <el-button type="primary" icon="Search" @click="commEvent.getRealTimeData"> 搜索 </el-button>
              <el-button icon="Refresh" @click="commEvent.onReset">重置</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="mt10">
        <div class="card__title">{{ typeText }}表</div>
        <el-row v-if="realTimeData.length" :gutter="20" class="mt20">
          <el-col v-for="(item, index) in realTimeData" :key="index" :xs="12" :sm="8" :md="6" :xl="4">
            <el-card class="list__card mb20">
              <div class="item__title">{{ item.name }}（{{ item.unit }}）</div>
              <div class="item__num">{{ Number(item.value).toFixed(2) }}</div>
              <div class="item__time">{{ item.time }}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-empty v-else />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import RealtimemonitoMenu, { MenuType } from "../components/RealtimemonitoMenu.vue"
import { energyTypeEnum } from "@/utils/enum"
import { organTree } from "@/api/modules/system"
import { SystemSpace as SystemApi } from "@/api/interface/system"
import { deviceListEnergy } from "@/api/modules/archive"
import { SystemSpace as SystemArchive } from "@/api/interface/archive"
import { realTimeStat } from "@/api/modules/energy"
import { SystemSpace } from "@/api/interface/energy"

// 参数
// 搜索值
const searchValue = ref({
  energyType: "electric",
  deviceId: undefined as number | undefined
})
// 菜单值
const menuValue = ref({
  factoryId: undefined as undefined | number,
  lineId: undefined as undefined | number
})
const openId = ref<number[]>([]) // 菜单展开id
const menuId = ref<number>(-1) // 菜单选中id
const menus = ref<MenuType[]>([]) // 菜单树结构
const typeText = ref<string>("电")
const devices = ref<SystemArchive.DeviceListEnergy[]>([]) // 设备信息
const realTimeData = ref<SystemSpace.RealTimeStat[]>([]) // 实时数据
// 事件
const commEvent = {
  // 获取菜单信息
  getMenus: async () => {
    const { data } = await organTree()
    menus.value = commEvent.formatMenu(data)
    if (data && data.length > 0) {
      const _id: number = data[0].id
      menuId.value = _id
      openId.value = [_id]
    }
    commEvent.getDevice(true)
  },
  // 格式化菜单树
  formatMenu: (data: SystemApi.OrganTree[], pids?: number[]): any[] => {
    if (!data || data.length <= 0) return []
    return data.map(item => {
      let pidArr: number[] = []
      if (pids) {
        pidArr = [...pids, item.pid || 0]
      }
      return {
        id: item.id,
        text: item.organName,
        level: item.level,
        pid: item.pid,
        pidArr,
        children: commEvent.formatMenu(item.childrenTree || [], pidArr)
      }
    })
  },
  // 菜单点击
  menuClick: (item: any) => {
    if (item.level === 1) {
      menuValue.value.factoryId = item.id
      menuValue.value.lineId = undefined
    } else if (item.level === 2) {
      menuValue.value.factoryId = item.pid
      menuValue.value.lineId = item.id
    } else {
      menuValue.value.factoryId = undefined
      menuValue.value.lineId = undefined
    }
    commEvent.getDevice(true)
  },
  // 重置
  onReset: () => {
    searchValue.value.energyType = "electric"
    commEvent.getDevice()
  },
  // 获取设备信息
  getDevice: async (load?: boolean) => {
    const params: SystemArchive.DeviceListEnergyQuery = {
      ...menuValue.value,
      energyType: searchValue.value.energyType
    }
    const { data } = await deviceListEnergy(params)
    devices.value = data
    searchValue.value.deviceId = data && data.length ? data[0].id : undefined
    if (load) {
      commEvent.getRealTimeData()
    }
  },
  // 获取实时数据
  getRealTimeData: async () => {
    typeText.value = energyTypeEnum.find(item => item.value === searchValue.value.energyType)?.label || "电"
    if (!searchValue.value.deviceId) {
      realTimeData.value = []
      return
    }
    const params: SystemSpace.RealTimeStatQuery = {
      energyType: searchValue.value.energyType,
      deviceId: searchValue.value.deviceId
    }
    const { data } = await realTimeStat(params)
    realTimeData.value = data
  }
}
onMounted(() => {
  commEvent.getMenus()
})
</script>

<style lang="scss" scoped>
.realtimemonito-box {
  display: flex;
  width: 100%;
  height: calc(100vh - 100px);
  .card__title {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 8px;
    font-size: 16px;
    font-weight: bold;
    &::before {
      position: absolute;
      left: 0;
      width: 3px;
      height: 75%;
      content: "";
      background-color: #1d4a9d;
      border-radius: 16px;
    }
  }
  .content__left {
    width: 200px;
    :deep(.el-card__body) {
      padding: 0;
    }
    height: 100%;
    overflow-y: auto;
    padding-right: 4px; /* 为滚动条留空间 */
    scroll-behavior: smooth;
    /* 滚动条宽度 */
    &::-webkit-scrollbar {
      width: 3px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: #f5f7fa;
      border-radius: 3px;
      margin: 2px 0; /* 上下留间距 */
    }

    // /* 滚动条滑块 */
    // &::-webkit-scrollbar-thumb {
    //   background: var(--el-color-primary-light-5); /* 默认：浅主题色 */
    //   border-radius: 3px;
    //   transition: all 0.3s ease;

    //   &:hover {
    //     background: var(--el-color-primary-light-3); /* 悬浮：中等主题色 */
    //   }

    //   &:active {
    //     background: var(--el-color-primary); /* 按下：主题色 */
    //   }
    // }
  }
  .content__right {
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    overflow-y: auto;
    .header-search__item {
      display: flex;
      align-items: center;
      width: 100%;
      .item__label {
        font-size: 14px;
      }
      .item__value {
        flex: 1;
      }
    }
    .list__card {
      width: 100%;
      margin-bottom: 20px;
      .item__title {
        font-size: 14px;
      }
      .item__num {
        margin-top: 5px;
        font-size: 28px;
        font-weight: bold;
      }
      .item__time {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>
